import React from 'react'
import PropTypes from "prop-types";
import { Icon, Row, Col,Input } from "antd";

import "./index.scss";

const {TextArea}=Input
export default class ShoppingCard extends React.Component {


  render() {
    const { id,img_src, name, note, number, img_height, disable_count_change } = this.props;
    const { onAdd, onMinus,onNote } = this.props;

    return (
      <Row type="flex" align="middle" className="cart_item">
        <Col span={10}>
          <Row type="flex" align="middle">
            <Col span={14}><Row type="flex" justify="center"><img height={img_height} src={img_src} alt={name} /></Row></Col>
            <Col span={8}><Row type="flex" justify="center" className="cart_item_info"><span>{name}</span></Row></Col>
          </Row>
        </Col>
        <Col span={8}>
          <Row type="flex" gutter={32} justify="center" className="cart_item_number">
            {!disable_count_change && <Col> <Icon onClick={onMinus} type="minus-circle" size="large" /></Col>}
            <Col><span>{number}</span></Col>
            {!disable_count_change && <Col><Icon onClick={onAdd} type="plus-circle" /></Col>}
          </Row>
        </Col>
               <Col span={6} style={{paddingRight:"8px"}} style={{textAlign:'center'}}>
              <span >施工范围</span>
              <TextArea  value={note} onChange={(e) => onNote(id,e.target.value)} rows={2} placeholder="备注" />
             
             </Col>
      </Row>
    )
  }

}
ShoppingCard.propTypes = {

  img_src: PropTypes.string,
  onAdd: PropTypes.func,
  onMinus: PropTypes.func,
  name: PropTypes.string.isRequired,
  number: PropTypes.number.isRequired,
  id: PropTypes.number.isRequired,

  disable_count_change: PropTypes.bool,

  img_height: PropTypes.number
}

ShoppingCard.defaultProps = {
  disable_count_change: false,
  img_src: "",
  onClick: (id) => console.log(id),

  img_height: 100
}
